$alert: $prefix + "alert";

$alert-types: (
    "info": "blue",
    "danger": "red",
    "warning": "yellow",
    "success": "green",
    "default": "gray"
);

.#{$alert} {
    @apply flex items-center p-4 text-sm rounded-lg w-full;

    @each $type, $color in $alert-types {
        &-type-#{$type} {
            @apply text-#{$color}-800 bg-#{$color}-50 dark:bg-gray-800 dark:text-#{$color}-400;

            .#{$alert}-close {
                @apply bg-#{$color}-50 text-#{$color}-500 hover:bg-#{$color}-200 hover:text-#{$color}-500 focus:ring-2 focus:ring-#{$color}-400 dark:hover:bg-gray-700 dark:bg-gray-800 dark:text-#{$color}-400;
            }
        }
    }
}